<template>
  <div class="search-proxy-work-container">
    <div class="search-head-box">
      <img src="./back1.png" class="back-pic" onclick="return false" @click="backPage"/>
      <div class="search-con">
        <img src="./search.png" class="search-logo" onclick="return false"/>
        <input type="text" class="search-name" placeholder="请输入企业名称或关键字" v-model="keyword" maxlength="20"/>
        <img src="./close.png" class="search-clear" v-show="showIcon" @click="clearKey" onclick="return false">
      </div>
      <span class="search-btn" @click="queryWorkResult">搜索</span>
    </div>


    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
      class="proxy-work-van" v-if="showData == 1"
    >
      <div class="proxy-work-list-box">

        <div class="proxy-work-list-item" v-for="(item,index) in workList" :key="index"
             @click="openWorkDetail(item.id)">

          <div class="work-logo-box">
            <div class="logo-con">
              <img :src="item.mechanismUrl?item.mechanismUrl:require('./pld_logo.png')" class="logo-pic"
                   onclick="return false"/>
              <span class="logo-title" v-show="item.isApply == 0">已报名</span>
              <span class="logo-full" v-show="item.status == 1">待招聘</span>
            </div>
            <div class="star-box">
              <img src="./star.png" class="star-pic"/><span class="star-score">{{item.mechanismScore}}分</span>
            </div>
          </div>

          <div class="work-item-con">
            <div class="work-item-content1">
              <div class="company-box">
                  <span class="company-name"
                        v-if="item.postType == 0 && item.reStatus == 1 && item.reMoney > 0 && item.reTime > 0">{{item.mechanismName}}</span>
                <span class="company-name"
                      v-else-if="item.postType == 1 && item.reStatus == 1 && item.addWorkMoney > 0 && item.reTime > 0">{{item.mechanismName}}</span>
                <span class="company-name company-all-length" v-else>{{item.mechanismName}}</span>
                <span class="company-post">{{item.workTypeName}}&nbsp;&nbsp;({{item.postName}})</span>
              </div>
              <div class="prize-con-box1"
                   v-if="item.postType == 0 && item.reStatus == 1 && item.reMoney > 0 && item.reTime > 0">
                <img src="./return_bg.png" class="return-fee-pic"/>
                <span class="return-fee-num">{{item.reMoney}}元</span>
              </div>
              <div class="prize-con-box2"
                   v-if="item.postType == 1 && item.reStatus == 1 && item.addWorkMoney > 0 && item.reTime > 0">
                <img src="./return_bg2.png" class="return-fee-pic"/>
                <span class="return-fee-num">{{Math.floor(item.addWorkMoney * 10) / 10}}元/时</span>
              </div>
            </div>
            <div class="work-item-content2">
              <span class="work-num">招{{item.maxNumber}}人</span>&nbsp;<span v-if="item.status != 1" class="work-num">/&nbsp;已报名{{item.applyNumber}}人</span>
              <span class="work-money" v-if="item.postType == 0">{{item.wageRange}}元/月</span>
              <span class="work-money" v-if="item.postType == 1">{{item.workMoney}}元/时</span>
            </div>
            <div class="work-item-content3">
              <span class="work-lend" v-show="item.lendType == 1">可借支</span>
              <span class="work-sex" v-if="item.age">{{item.age}}</span>
            </div>
            <div class="work-item-content4">
              <span class="work-key" v-if="item.key.length > 0" v-for="(val,k) in item.key" :key="k">{{val}}</span>
            </div>
          </div>

        </div>
      </div>
    </van-list>


    <div class="content-box" v-if="showData == 0 && hisItem.length > 0">
      <div class="clear-box">
        <span class="search-his-title">搜索历史</span>
        <div class="clear-con" @click="rubbish">
          <img src="./clean.png" class="clear-pic" onclick="return false"/>
          <span class="clear-title">清空</span>
        </div>
      </div>
      <div class="content-list">
        <div class="content" v-for="(item,k) in hisItem" :key="k" @click="queryShowKey(item)">
          <img src="./history.png" class="his-pic"/>
          <span>{{item}}</span>
        </div>
      </div>
    </div>

    <div class="empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <img src="../../../assets/img/empty.png" class="empty-pic" onclick="return false"/>
        <div class="tip">搜索尚无结果，更多企业正在洽谈中，敬请期待！</div>
      </div>
    </div>

    <div class="work-mask_transparent-toast" v-if="showToast"></div>
  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env";
  import {getSessionStore, setSessionStore} from "../../../config/util"

  export default {
    data() {
      return {
        showData: 0,
        keyword: "",
        showIcon: false,
        hisTime: [],//搜索时间
        hisItem: [],//搜索内容,
        workList: [],
        currentPage: 1,
        pageSize: 20,
        userSign: "",
        loading: false,
        finished: false,
        showToast: false,
        identity: "",
        sginMark: 2
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      if (sessionStorage.getItem("user_sign")) {
        this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
        this.sginMark = 1;
      }
      if (getSessionStore("proxy_work_identity")) {
        this.identity = getSessionStore("proxy_work_identity");
      }

      this.dataInit();
    },
    methods: {
      queryWorkResult() {
        if (this.keyword == "" || this.keyword == undefined || this.keyword == null) {
          this.$vux.toast.text("请输入搜索的企业名称或关键字", "middle");
          return;
        }
        let key = (new Date()).getTime();
        let flag = this.findArray(this.keyword, this.hisItem);
        if (flag) {//输入的内容localStorage有记录
          for (let i = 0; i < localStorage.length; i++) {
            if (this.keyword == localStorage.getItem(localStorage.key(i))) {
              localStorage.removeItem(localStorage.key(i));
            }
          }
          localStorage.setItem(key, this.keyword);
        } else {
          if (this.hisItem.length >= 10) {
            localStorage.removeItem(this.hisTime[0]);
            localStorage.setItem(key, this.keyword);
          } else {
            localStorage.setItem(key, this.keyword)
          }
        }

        this.currentPage = 1;
        this.PageSize = 20;
        this.workList = [];
        this.queryProxyWorkList();
        this.dataInit();
      },
      queryShowKey(name) {
        this.keyword = name;
        this.currentPage = 1;
        this.PageSize = 20;
        this.workList = [];
        this.queryProxyWorkList();
      },
      dataInit() {//初始化
        this.hisTime = [];
        this.hisItem = [];
        for (let i = 0; i < localStorage.length; i++) {
          if (!isNaN(localStorage.key(i))) {
            this.hisItem.push(localStorage.getItem(localStorage.key(i)));
            this.hisTime.push(localStorage.key(i));
            this.showData = 0;
          }
        }
        this.hisItem = this.hisItem.reverse();
      },
      findArray(index, array) {
        for (let i = 0; i < array.length; i++) {
          if (array[i] === index) {
            return true;
          }
        }
      },
      onLoad() {
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryProxyWorkList();
            this.timer = null;
          }, 500)
        }
      },
      queryProxyWorkList() {//查询招工列表
        this.showToast = true;
        this.axios.get(baseUrl + "/work/get_work_list?sgin=" + this.userSign + "&mechanismAddress=" + "&identity=" + this.identity + "&type=1" + "&mechanismName=" + this.keyword + "&mechanismTypeId=" + "&workType=" + "&orderType=" + "&page=" + this.currentPage + "&size=" + this.pageSize + "&sginMark=" + this.sginMark).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            this.showData = 1;
            if (resultObj.data.workList != null && resultObj.data.workList.length > 0) {//招工数据
              for (let i = 0, length = resultObj.data.workList.length; i < length; i++) {
                if (resultObj.data.workList[i].key != null && resultObj.data.workList[i].key != "") {
                  resultObj.data.workList[i].key = resultObj.data.workList[i].key.replace(/丨/g, "|").split("|");
                }
              }
              this.workList = this.workList.concat(resultObj.data.workList);
              this.loading = false;
              this.currentPage++;
            }
            else {
              if (this.loading) {
                this.loading = false;
                if (this.workList.length >= resultObj.data.workList.length) {
                  this.finished = true;
                }
              } else {
                this.showData = 2;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
          this.showToast = false;
        }).catch(() => {
          this.showToast = false;
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      clearKey() {
        this.keyword = "";
        this.showIcon = false;
      },
      rubbish() {//清除
        for (let i = 0; i < this.hisTime.length; i++) {
          localStorage.removeItem(this.hisTime[i]);
        }
        this.showData = 0;
        this.dataInit();
      },
      openWorkDetail(id) {//招工详情
        setSessionStore("proxy_work_mark", 2);
        this.$router.push({path: "/proxyworkdetail", query: {"workId": id}});
      },
      backPage() {
        this.$router.push("/proxywork");
      }
    },
    watch: {
      keyword() {
        if (this.keyword == "" || this.keyword == undefined || this.keyword == null) {
          this.showIcon = false;
        } else {
          this.showIcon = true;
        }
        this.showData = 0;
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .search-proxy-work-container
    wh(100%, 100%)
    background: #f5f5f5
    .search-head-box
      position: fixed
      top: 0
      z-index: 99
      wh(100%, 1.2rem)
      display: flex
      align-items: center
      background: #FFF
      .back-pic
        margin-left: 2%
        margin-right: 3.2%
        wh(0.48rem, 0.48rem)
      .search-con
        display: flex
        align-items: center
        wh(75.73%, 0.8rem)
        background: #F2F1F0
        border-radius: 0.387rem
        .search-logo
          margin-left: 0.213rem
          margin-right: 0.253rem
          wh(0.48rem, 0.48rem)
        .search-name
          wh(80%, 0.6rem)
          line-height: 0.6rem
          size-color(0.373rem, #333)
          background: #F2F1F0
        .search-clear
          margin-left: auto
          margin-right: 0.2rem
          wh(0.48rem, 0.48rem)
      .search-btn
        margin-left: 0.307rem
        margin-right: 0.32rem
        wh(1.307rem, 0.8rem)
        line-height: 0.8rem
        size-color(0.427rem, #3CAFFF)
        text-align: center
    .empty-wrap
      position: absolute
      top: 0
      bottom: 0
      left: 0
      right: 0
      margin: auto
      fj(center, center)
      wh(100%, auto)
      .empty-box
        display: flex
        flex-direction: column
        align-items: center
        .empty-pic
          wh(4.773rem, 4.773rem)
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          size-color(0.373rem, rgba(68, 68, 68, 1))
    .content-box
      position: fixed
      top: 1.467rem
      wh(100%, auto)
      background: #FFF
      .clear-box
        display: flex
        align-items: center
        wh(100%, 1.067rem)
        border-bottom: 0.027rem solid rgba(238, 238, 238, 1)
        .search-his-title
          padding-left: 0.32rem
          size-color(0.4rem, #333)
        .clear-con
          display: flex
          align-items: center
          margin-left: auto
          margin-right: 0.48rem
          padding-top: 0.1rem
          padding-bottom: 0.1rem
          .clear-pic
            padding-right: 0.1rem
            wh(0.427rem, 0.427rem)
          .clear-title
            size-color(0.373rem, #666)
      .content-list
        wh(100%, auto)
        .content
          display: flex
          align-items: center
          margin-left: 3.2%
          wh(96.8%, 1.12rem)
          size-color(0.373rem, #333)
          border-bottom: 0.027rem solid rgba(238, 238, 238, 1)
          &:last-child
            border-bottom: none
          .his-pic
            margin-right: 0.24rem
            wh(0.347rem, 0.347rem)
    .work-mask_transparent-toast
      position: fixed
      z-index: 1000
      top: 0
      right: 0
      left: 0
      bottom: 0
    .proxy-work-van
      position: absolute
      top: 1.467rem
      wh(100%, auto)
      .proxy-work-list-box
        display: flex
        flex-direction: column
        wh(100%, auto)
        .proxy-work-list-item
          display: flex
          wh(100%, 3.64rem)
          background: #FFF
          border-bottom: 0.027rem solid #f5f5f5
          .work-logo-box
            margin-top: 0.4rem
            margin-left: 3.2%
            .logo-con
              position: relative
              wh(2.133rem, 1.6rem)
              .logo-pic
                wh(100%, 100%)
                border-radius: 0.16rem
              .logo-title
                position: absolute
                bottom: 0
                fj(center, center)
                wh(100%, 0.48rem)
                background: rgba(0, 0, 0, 0.5)
                border-bottom-left-radius: 0.16rem
                border-bottom-right-radius: 0.16rem
                size-color(0.333rem, #FFF)
              .logo-full
                position: absolute
                top: 0
                left: 0
                fj(center, center)
                wh(1.067rem, 0.373rem)
                background: #ff8e59
                border-radius(0.053rem)
                size-color(0.293rem, #FFF)
                font-weight: 500
            .star-box
              display: flex
              align-items: center
              wh(2.133rem, 0.32rem)
              margin-top: 0.56rem
              .star-pic
                wh(0.32rem, 0.32rem)
              .star-score
                padding-left: 0.16rem
                size-color(0.34rem, rgba(250, 191, 72, 1))
                font-weight: 500
          .work-item-con
            margin-left: 0.32rem
            wh(69.6%, auto)
            .work-item-content1
              display: flex
              justify-content: space-between
              wh(100%, 1.12rem)
              padding-top: 0.4rem
              .company-box
                display: flex
                flex-direction: column
                .company-name
                  padding-top: 0.05rem
                  padding-bottom: 0.19rem
                  size-color(0.4rem, #333)
                  font-weight: 500
                  width: 4.55rem
                  ellipsis()
                .company-all-length
                  width: 6.95rem
                .company-post
                  font-size: 0.373rem;
                  size-color(0.4rem, #3cafff)
                  font-weight: 500
              .prize-con-box1
                position: relative
                padding-top: 0.053rem
                wh(2.16rem, 0.827rem)
                .return-fee-pic
                  wh(2.16rem, 0.827rem)
                .return-fee-num
                  position: absolute
                  fj(center, center)
                  top: 0
                  bottom: 0
                  left: 0.6rem
                  right: 0
                  margin: auto
                  size-color(0.347rem, rgba(255, 148, 69, 1))
                  font-weight: 500
              .prize-con-box2
                position: relative
                padding-top: 0.053rem
                wh(2.333rem, 0.827rem)
                .return-fee-pic
                  wh(2.333rem, 0.827rem)
                .return-fee-num
                  position: absolute
                  fj(center, center)
                  top: 0
                  bottom: 0
                  left: 0.65rem
                  right: 0
                  margin: auto
                  size-color(0.347rem, rgba(255, 148, 69, 1))
                  font-weight: 500
            .work-item-content2
              padding-top: 0.253rem
              padding-bottom: 0.333rem
              height: 0.4rem
              display: flex
              align-items: center
              .work-num
                size-color(0.32rem, rgba(153, 153, 153, 1))
              .work-money
                margin-left: auto
                size-color(0.4rem, rgba(255, 89, 89, 1))
                font-weight: 500
            .work-item-content3
              display: flex
              align-items: center
              height: 0.4rem
              padding-bottom: 0.16rem
              .work-lend
                text-align: center
                line-height: 0.4rem
                wh(1.147rem, 0.4rem)
                background: #3cafff
                border-radius: 0.053rem
                size-color(0.293rem, #FFF)
                margin-right: 0.1rem
              .work-sex
                line-height: 0.4rem
                padding-left: 0.1rem
                padding-right: 0.1rem
                height: 0.4rem
                border: 1px solid rgba(60, 175, 255, 1)
                border-radius: 0.053rem
                size-color(0.293rem, #3cafff)
            .work-item-content4
              display: flex
              align-items: center
              .work-key
                height: 0.4rem
                line-height: 0.4rem
                border-radius: 0.053rem
                background: #F0F1F2
                padding-left: 0.1rem
                padding-right: 0.1rem
                size-color(0.293rem, rgba(128, 128, 128, 1))
                margin-right: 0.1rem
                &:last-child
                  margin-right: 0
</style>
